<template>
  <div class="recommend">
    <i class="el-icon-close recommend-close" @click="close"></i>
    <div id="qrcode" class="qrcode">
      <canvas ref="qrcode" class='qrcodeBox'></canvas>
    </div>
    <div class="inviteCode">
      <span>{{$store.state.user.invitation_code}}</span>
    </div>
    <div class="shareBtn" v-if="showFriend" @click="showFriend = !showFriend">
      <span>输入好友邀请码</span>
    </div>
    <el-form class="friendForm" :model="form" ref="ruleForm" label-position="left" v-else>
      <el-form-item >
        <!--  :disabled="!code_show" -->
        <el-input class="email_inp" v-model="form.referral_code" placeholder="请输入好友的邀请码" :disabled="!code_show" autocomplete="off"></el-input>
        <div :class="code_show ? 'friendForm_btn' : 'friendForm_btn disabled' " @click="submit">
          <span>提交</span>
        </div>
      </el-form-item>
    </el-form>
    <div 
      class="shareBtn shareBtnTwo"
      v-clipboard:error="onError"
      v-clipboard:copy="pcQrcodeURL"
      v-clipboard:success="onCopy">
      
      <span>生成分享链接</span>
    </div>
    
  </div>
</template>

<script>
import QRCode from "qrcode"; // 引入qrcode
export default {
  data () {
    return {
      created_at:'',
      code_show:false,
      ref_code:'',
      form: {
        referral_code: ''
      },
      qrcodeURL: '',
      pcQrcodeURL: '',
      showFriend: true,
    }
  },
  mounted () {
    this.createQrCode(
      "qrcode",
      this.qrcodeURL
    );

  },
  created(){
    // this.getUser()
    var timestamp = Date.parse(new Date());
    this.qrcodeURL= `http://m.mingyukehui.com/agentRegister?channel_pid=${this.$store.state.user.cryptId}&code=${this.$store.state.user.invitation_code}&effectiveDate=${timestamp}`,
    this.pcQrcodeURL= `https://mingyukehui.com/agentRegister?channel_pid=${this.$store.state.user.cryptId}&code=${this.$store.state.user.invitation_code}&effectiveDate=${timestamp}`,
    this.created_at = this.$store.state.user.created_at
    this.ref_code = this.$store.state.user.referral_code
    if(this.ref_code == '' || this.ref_code == 0){
      this.code_show = true
    } else {
      this.form.referral_code = this.ref_code
      this.code_show = false
    }
  },
  methods: {
    compareDate(d1, d2) {
      return ((new Date(d1.replace(/-/g, "\/"))) > (new Date(d2.replace(/-/g, "\/"))));
    },
    submit(){
      if (this.code_show) {
        let judgeDate = '2020-07-01 00:00:00'
        if(this.compareDate(judgeDate, this.created_at)){
            this.$alert(
            '只有2020年7月1日后注册的用户才可以参加本活动哟。您也可以邀请您的好友来参加活动，点击下方生成分享链接，并将您的邀请链接发送给朋友，可以获得现金奖励！', 
            '提示', {
            confirmButtonText: '确定',
            center: true,
            dangerouslyUseHTMLString: true,
            callback: action => {
            }
          })
        }else{
          if(this.form.referral_code != ''){
            var reg = /^\d{6}\b/;
            if(!reg.test(this.form.referral_code)){
              this.$alert('请输入6位邀请码', '提示', {
                confirmButtonText: '确定',
                center: true,
                callback: action => {
                }
              })
            } else{
              this.$axios
              .put("/api/consumer/update",{
                referral_code: this.form.referral_code
              })
              .then(res => {
                if (res.data.code == 200) {
                  this.$alert('邀请码填写成功！', '提示', {
                    confirmButtonText: '确定',
                    type:'success',
                    center: true,
                    callback: action => {
                    }
                  })
                  this.getUser()
                  this.$router.push('/mechanism/home/menu')
                } else {
                  this.$message({
                    message: res.data.message,
                    type: "error"
                  });
                }
              })
              .catch(err => {
                this.$message.error(err);
              });
            }
          }
        }
      } else {
        this.$alert(
          `<p>您已经填写过好友的邀请码，</p>
          <p>请不要重复填写哟！</p>
          <p>您朋友的邀请码是：${this.$store.state.user.referral_code}</p>`, 
          '提示', {
          confirmButtonText: '确定',
          center: true,
          dangerouslyUseHTMLString: true,
          callback: action => {
          }
        })
      }
    },

    createQrCode(refName, payUrl) {
      QRCode.toDataURL(this.$refs[refName], payUrl, {
        width: 100,
        height: 100,
        margin: 0
      })
        .then(url => {})
        .catch(err => {
          // this.openMessage(0, '生成二维码失败')
        });
    },
    close () {
      this.$router.push({path:'/mechanism/home/menu'})
    },
    // 复制成功
    onCopy(e){
      this.$alert(`
        <p>分享链接已生成，</p>
        <p>有效时间为60分钟。</p>`, '提示', {
        confirmButtonText: '复制链接',
        dangerouslyUseHTMLString: true,
        callback: action => {
          if(action != 'cancel'){
            this.$alert(`
              <p>分享链接已复制成功，</p>
              <p>赶快去分享给好友吧！</p>`, '提示', {
              confirmButtonText: '确定',
              dangerouslyUseHTMLString: true,
              callback: action => {
                // if(action != 'cancel'){
                  
                // }
              }
            });
          }
        }
      });
    },
    // 复制失败
    onError(e){
      this.$message({
        message:'复制失败！',
        type:'error'
      })
    },
  }
}
</script>

<style lang='less'>
  .recommend {

    width: 100%;
    height: 100%;
    // padding-top: 60px;
    background: url('../../../assets/img/代理人.jpg');
    position: relative;
    overflow: hidden;
    &-close {
      font-size: 25px;
      position: absolute;
      right: 30px;
      top: 30px;
      cursor: pointer;
    }
    .qrcode {
      margin: 245px auto 15px;
      width: 100px;
      height: 100px;
      // display: inline-block;
    }
    .inviteCode {
      text-align: center;
      font-size: 18px;
      color: #A4830E;
    }
    .shareBtn {
      cursor: pointer;
      margin: 100px auto 20px;
      width:247px;
      height:45px;
      // line-height: 45px;
      text-align: center;
      background:linear-gradient(180deg,rgba(252,211,67,1),rgba(255,142,9,1));
      box-shadow:0px 9px 40px 0px rgba(189,23,35,0.4);
      border-radius:22px;

      span {
        color:rgba(189,23,35,1);
        font-size: 18px;
        margin: 9.5px 0;
        display: inline-block;
      }
    }
    .friendForm {
      margin: 100px auto 20px;
      width:247px;
      height:45px;
      
      .el-input {
        width:160px;
        line-height: 29px;
        vertical-align: super;  
        .el-input__inner {
          height:29px;
          background:rgba(241,49,64,1);
          border:1px solid rgba(253,191,50,1);
          border-radius:14px;
          color: rgba(253,191,50,1);
        }
      }
      .friendForm_btn {
        cursor: pointer;
        vertical-align: super;  
        display: inline-block;
        width:75px;
        height:29px;
        background:rgba(253,191,50,1);
        border-radius:14px;
        font-size: 15px;
        color: rgba(189,23,35,1);
        text-align: center;
        line-height: 29px;
        span {
          display: inline-block;
        }

      }
      .friendForm_btn:active {
        box-shadow:inset 0px 0px 5px 1px #666;
      }
      
    }
    .shareBtn:active {
      box-shadow:inset 0px 0px 5px 1px #000;
    }
    .shareBtnTwo {
      margin-top: 0px;
    }
    .disabled {
      cursor: no-drop !important;
    }
    .disabled:active {
      box-shadow:none;
    }
  }
</style>